<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/call-number'}"><i class="el-icon-s-promotion"></i>叫号</el-breadcrumb-item>
      <el-breadcrumb-item>保留订单</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <div>
      <audio ref="audio">
        <source :src = "audioPath"/>
      </audio>
    </div>
    <el-row :gutter="24" >
      <el-col :span="8" v-for="(item, card) in orderList">
        <el-card class="out_box-card">
          <el-row :gutter="8">
            <el-col :span="15">
              <el-card class="in_box-card" align="center">
                <el-button type="primary">{{ item.tableName }}</el-button>
                <div>预计需等待{{5+(card+1)*5}}分钟</div>
                <div>{{item.capacity}}人就餐</div>
                <div class="header-right-corner">
                  <span class="sort">{{card+1}}</span>
                </div>
              </el-card>
            </el-col>
            <el-col :span="2">
              <el-button round size="medium" icon="el-icon-message-solid" @click="callNumber(item)">叫号</el-button>
              <el-button round size="medium" icon="el-icon-fork-spoon" @click="eating(item)">就餐</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="margin: 10px 0 0 0; height: 30px;">
      <el-pagination
          align="center"
          @current-change="changePage"
          layout="total, prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
  data(){
    return{
      orderList:[],
      currentPage:1,
      pageSize:1,
      total: 0,
      audioPath:''
    }
  },
  methods:{
    callNumber(item){//叫号
      let audio = new Audio();
      switch (item.tableId){
        case 1:
          audio = require("../../assets/aduio01.wav")
          break;
        case 2:
          audio = require("../../assets/aduio02.wav")
          break;
        case 3:
          audio = require("../../assets/aduio03.wav")
          break;
        case 4:
          audio = require("../../assets/aduio04.wav")
          break;
        case 5:
          audio = require("../../assets/aduio05.wav")
          break;
      }
      this.$refs.audio.src = audio;
      this.$refs.audio.play();
    },
    changePage(page){//分页选择器改变
      this.$router.push('?page='+page);
      this.loadCallNumList();
    },
    eating(item){//点击就餐按钮
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }
      let url = BaseUrl.FRONT_ORDER+'/orders/'+item.id+'/update';
      console.log('url:'+url)
      let orderUpdateInfo = {
        takingStatus: 2,
        orderState: 4
      }
      TokenAxios.post(url,orderUpdateInfo).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            type: 'success',
            duration:500,
            message: '用户已就餐！'
          });
          this.loadCallNumList();
        } else {
          this.$message({
            type: 'error',
            duration:500,
            message: jsonResult.message
          });
        }
      });
    },
    loadCallNumList(){//加载叫号页面订单列表
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }
      let url = BaseUrl.FRONT_ORDER+'/orders/order-for-table';
      console.log('url:'+url)

      let orderQueryInfo = {
        takingStatus: 0,
        orderState: 3,
        orderMethod: 2,
        pageNum: page
      }
      TokenAxios.post(url,orderQueryInfo).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.orderList = jsonResult.data.list;
          this.total = this.orderList.length;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
        } else {
          this.$message.error(jsonResult.message);
        }
      });
    }
  },
  mounted() {
    this.loadCallNumList();
  }
}
</script>
<style scoped lang="less">
.in_box-card{
  position: relative;
  overflow: hidden;
}
.out_box-card button {
  width: 100px;
  margin: 20px 0;
  border: 1px solid rgba(30, 144, 255, 0.58);
  color: rgba(30, 144, 255, 0.58);
}

.in_box-card button {
  color: #fff;
  font-size: 20px;
  margin: 6px 0;
  border-radius: 10px;
  background: #545fc5;
  border: #3c4bd2;
  width: 120px
}

.in_box-card div {
  margin: 5px;
}
.header-right-corner {
  width: 80px;
  height: 80px;
  position: absolute;
  background-color: rgb(126, 136, 225);
  bottom: -45px;
  right: -45px;
  transform: rotate(45deg);
  box-shadow: #545fc5 10px 10px 10px 10px;

  .sort {
    position: absolute;
    right: 25px;
    top: 25px;
    transform: rotate(-45deg);
    display: block;
    font-size: 22px;
    color: #ffffff;
    width: 80px;
    text-align: center;
  }
}

</style>